<template>
	<view>
		<view class="cu-bar bg-yellow2">
			<view class="padding-lr flex align-center">
				{{orderInfo.startRegion}}<text class=" myIcon-jiantou padding-lr-xs"></text> {{orderInfo.endRegion}}
			</view>
			<view class="padding-lr text-gray text-xs">
				{{orderInfo.speedDate}} {{orderInfo.speedTime}}乘车
			</view>
		</view>
		<seat-charts height="500" :speedSeat="orderInfo.speedSeat" @handleChooseSeat="handleChooseSeat"></seat-charts>
		<view class="cu-bar bg-white bottom-fix">
			<view class="padding-lr">
				<view class="text-sm text-gray">座位数:{{orderInfo.pollNum}}</view>
			</view>
			<view class="padding-lr">
				<button class="cu-btn bg-gradual-orange" @click="gotoBuy()">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	import SeatCharts from "../../components/SeatCharts.vue"
	export default {
		components: {
			SeatCharts
		},
		data() {
			return {
				mapHeight: '400',
				orderInfo: null,
				pollNum: 0,

			}
		},
		onLoad(option) {
			this.orderInfo = JSON.parse(option.orderdetail)
			this.orderInfo.seatList.forEach(sert => {
				this.orderInfo.speedSeat[sert[0]][sert[1]][sert[2]] = 0
			})
			this.orderInfo.seatList=[]
		},
		methods: {
			gotoBuy() {
				if (!this.pollNum) {
					return this.$comm.errorToShow('请先选座')
				}
				if (this.pollNum < this.orderInfo.pollNum) {
					return this.$comm.errorToShow('座位还未选择完毕')
				}
				if (this.pollNum > this.orderInfo.pollNum) {
					return this.$comm.errorToShow('座位数过多，只能选择' + this.orderInfo.pollNum + '个')
				}
				this.orderInfo.pollNum = this.pollNum
				uni.$emit('changeSpeed', {
					...this.orderInfo
				})
				this.$comm.navigateBack()
			},
			handleChooseSeat(e) {
				if (!this.orderInfo.seatList) {
					this.orderInfo.seatList = []
				}
				if (e.type == 'add') {
					this.orderInfo.speedPolleave--
					this.orderInfo.seatList.push(e.seat)
				} else {
					this.orderInfo.speedPolleave++
					let indexSeat = this.orderInfo.seatList.findIndex(seat => {
						if (e.seat[0] == seat[0] && e.seat[1] == seat[1] && e.seat[2] == seat[2]) {
							return true
						}
					})
					indexSeat != -1 && this.orderInfo.seatList.splice(indexSeat, 1)
				}
				this.pollNum = e.pollNum
				this.orderInfo.speedSeat = e.speedSeat
			}
		}
	}
</script>

<style scoped>
	.textxxl {
		font-size: 24px;
	}
</style>
